<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Practice</title>
<link href="CSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
  <nav>
    <h1><a href="#Intro">Web Design Portfolio</a></h1>
    <ul>
      <li> <a title="Intro" href="#Intro" >Intro</a></li>
      <li> <a title="Portfolio" href="#Portfolio" >Portfolio</a></li>
      <li> <a title="About" href="#About" >About</a></li>
      <li> <a title="Contact" href="#Contact" >Contact</a></li>
    </ul>
  </nav>
</header>
<section id="secIntro"> <img src="images/intro.png" alt=""/>
  <h2>Hand-coded<strong> HTML</strong> and <strong>CSS</strong> is what I do. <br>
    <span>It's what I'm good at so why not?</span></h2>
</section>
<section id=secContnt>
  <form>
    <time datetime=2013-7-17>2013年7月17日</time>
    <p> UserName:
      <input id="userName" placeholder="input your UserName"  autofocus />
    </p>
    <p> Password:
      &nbsp;
      <input id="password" placeholder="input your Password" type="password"/>
    <p>Borthplace:
      <input id="borthplace" placeholder="input your Borthplace"  list="place">
      <datalist id="place" style=" display:none;">
        <option value="ChongQing">CHongQing</option>
        <option value="QuanZhou">QuanZhou</option>
        <option value="QingHai">QingHai</option>
        <option value="GuangZhou">GuangZhou</option>
        <option value="GuiLin">GuiLin</option>
      </datalist>
    </p>
    </p>
  </form>
</section>
<section id=testSection>
  <form id="verification">
    <input type="text" name="text" id=t required pattern="^\w.*$"/>
    <input type="submit" value="提交"/>
  </form>
  <form id=testForm onSubmit="return Check()">
    Email:
    <input type="email" id="email" name="email" />
    <br/>
    Url:
    <input type="url" id="url" name="url" />
    <input type="submit" value="提交"/>
  </form>
  <script language="javascript">
function Check()
{
	var email=document.getElementById("email");
	if(email.value=="")
	{
		alert("Email 地址不能为空！");
	}
	else if(!email.checkValidity())
	{
		alert("请输入正确的Email地址！");
		}
		
		
		var url=document.getElementById("url");
	if(url.value=="")
	{
		alert("url 地址不能为空！");
	}
	else if(!url.checkValidity())
	{
		url.setCustomValidity("请输入正确的url地址！");//自定义错误信息(未实现)
		}
}
</script> 
  <br/>
  <section><span>使用details and mark</span><br/>
    <details> 
      <summary>精武风云</summary>
      <p>
        <mark>精武成真</mark>
        甄子丹饰 当年为报杀师之仇f</p>
    </details>
  </section>
  <br/>
  <section> <span>使用dl</span>
    <dl>
      <dt><dfn>用于名词解释</dfn></dt>
      <dd>所谓用于名词解释。。</dd>
      <br/>
      <dt>作者</dt>
      <dd>郭敬明</dd>
    </dl>
  </section>
  <br/>
  <section> <span>使用cite</span><br/>
    但愿人长久，千里共婵娟--<cite>水调歌头</cite> </section>
</section>
<section id=fileReader>
  <p>
    <label>请选择一个文件：</label>
    <input type="file" id="file"/>
    <input type="button" value="图像" onClick="readAsDataUrl()"/>
    <input type="button" value="二进制" onClick="readAsBinaryString()"/>
    <input type="button" value="文本" onClick="readAsText()"/>
  </p>
  <div id="result" name="result"></div>
  <script language="javascript">
var result=document.getElementById("result");
var file=document.getElementById("file");
if(typeof FileReader =='undefined')
{result.innerHTML="<p>浏览器不支持FileReader</p>";
file.setAttribute('disabled','disabled');}
function readAsDataUrl(){
	var file=document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type))
{
	alert("请确保文件为图像类型");
	return flase;
	}
	var reader=new FileReader();
	reader.readAsDataURL(file);
	reader.onload=function (e)
	{
		var result=document.getElementById("result");
		result.innerHTML="文件类型："+file.type+"<br/>"+ "文件大小："+file.size+"KB"+"<br/>"+'<img src="'+this.result+'" alt=""/>';
		}
	
}

function readAsBinaryString(){
	var file=document.getElementById("file").files[0];
	var reader=new FileReader();
	reader.readAsBinaryString(file);
	reader.onload=function (f)
	{
		var result=document.getElementById("result");
		result.innerHTML="文件类型："+file.type+"<br/>"+ "文件大小："+file.size+"KB"+"<br/>"+this.result;
		}
	
}

function readAsText(){
	var file=document.getElementById("file").files[0];
	var reader=new FileReader();
	reader.readAsText(file);
	reader.onload=function (t)
	{
		var result=document.getElementById("result");
		result.innerHTML= "文件类型："+file.type+"<br/>"+ "文件大小："+file.size+"KB"+"<br/>"+this.result;
		}
	
} 

</script> 
</section>

<section id=upLoadFile>

</section>
<footer>
  <p><small>版权所有，翻版必究</small></p>
</footer>
</body>
</html>
